<template>
  <div class="account-ticket">
    <top v-if="Object.keys(account).length > 0">
      <li>
        <span class="text">可用:</span>
        <span class="num">{{ +account.ticket }}</span>
      </li>
    </top>
    <v-menu
      @clickCreate="getCommission"
      @clickConsume="getConsume"
      create="返佣"
      consume="消费"
      :current="currentIndex"
    />
    <template v-if="currentIndex === 0">
      <ul class="commission">
        <li
          class="item"
          v-for="(item, index) in commissionList"
          :key="index"
        >
          <div class="award">{{ item.award_name }}</div>
          <div class="desc">
            <p class="fans">
              <span class="text">操作ID:</span>
              <span class="color">{{ item.fans_id }}</span>
            </p>
            <p class="score">
              <span class="text">购物券:</span>
              <span class="color">+{{ +item.ticket }}</span>
            </p>
            <p class="time">
              <span class="text">时间:</span>
              <span class="color">{{ item.create_time }}</span>
            </p>
          </div>
        </li>
      </ul>
      <pull-up
        :loading="loading"
        :busy="queryCommission.busy"
        @loadMore="loadMore" />
      <loading :show="loading" />
    </template>
    <template v-if="currentIndex === 1">
      <ul class="consume">
        <li
          class="item"
          v-for="(item, index) in consumeList"
          :key="index"
        >
          <p class="desc" v-if="item.text && item.text.length > 0">
            <span class="text">操作:</span>
            <span class="color">{{ item.text }}</span>
          </p>
          <p class="order" v-if="item.order_id > 0">
            <span class="text">订单ID:</span>
            <span class="color">{{ item.order_id }}</span>
          </p>
          <p class="group" v-if="item.group_order_id > 0">
            <span class="text">拼团ID:</span>
            <span class="color">{{ item.group_order_id }}</span>
          </p>
          <p class="merchant" v-if="item.merchant_order_id > 0">
            <span class="text">线下消费ID:</span>
            <span class="color">{{ item.merchant_order_id }}</span>
          </p>
          <p class="score">
            <span class="text">购物券:</span>
            <span class="color">-{{ +item.ticket }}</span>
          </p>
          <p class="status">
            <span class="text">状态:</span>
            <span class="color">{{ item.status | consumeStatus }}</span>
          </p>
          <p class="time">
            <span class="text">时间:</span>
            <span class="color">{{ item.create_time }}</span>
          </p>
        </li>
      </ul>
      <pull-up
        :loading="loading"
        :busy="queryConsume.busy"
        @loadMore="loadMore" />
      <loading :show="loading" />
    </template>

  </div>
</template>

<script>
import Top from '../components/Top'
import Menu from '../components/Menu'
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import PullUp from '@/components/PullUp'
export default {
  name: 'AccountTicket',
  components: {
    Top,
    'v-menu': Menu,
    Loading,
    PullUp
  },
  filters: {
    consumeStatus(v) {
      return +v === 1 ? '已消费' : '退回'
    }
  },
  data() {
    return {
      loading: false,
      currentIndex: 0,
      commissionList: [],
      consumeList: [],
      account: {},
      queryCommission: {
        page: 0,
        pageSize: 10,
        busy: false,
        type: 'ticket'
      },
      queryConsume: {
        page: 0,
        pageSize: 10,
        busy: false,
        type: 'ticket'
      }
    }
  },
  methods: {
    getAccount() {
      this.loading = true
      api.Account.myAccount().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.account = data.account
      }).finally(() => {
        this.loading = false
      })
    },
    loadMore() {
      setTimeout(() => {
        if (this.currentIndex === 0) {
          this.getCommission(true)
        }
        if (this.currentIndex === 1) {
          this.getConsume(true)
        }
      }, 200)
    },
    getCommission(append = false) {
      this.currentIndex = 0
      if (this.queryCommission.busy === false) {
        this.queryCommission.page++
        this.loading = true
        this.queryCommission.busy = true
        api.Account.myCommission({
          ...this.queryCommission
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryCommission.busy = true
          } else {
            this.queryCommission.busy = false
            if (append) {
              this.commissionList = this.commissionList.concat(data.list)
            } else {
              this.commissionList = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    getConsume(append = false) {
      this.currentIndex = 1
      if (this.queryConsume.busy === false) {
        this.queryConsume.page++
        this.loading = true
        this.queryConsume.busy = true
        api.Account.myConsume({
          ...this.queryConsume
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryConsume.busy = true
          } else {
            this.queryConsume.busy = false
            if (append) {
              this.consumeList = this.consumeList.concat(data.list)
            } else {
              this.consumeList = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.getAccount()
  },
  deactivated () {
    this.queryCommission.busy = true
    this.queryConsume.busy = true
  }
}
</script>

<style scoped lang="stylus">
.account-ticket
  .commission
    margin-bottom 15px
    .item
      margin 10px
      padding 10px
      background white
      border-radius 10px
      min-height 100px
      display flex
      .award
        width 100px
        height 100px
        line-height 100px
        color red
        font-weight 700
        font-size 16px
        letter-spacing 1px
      .desc
        flex 1
        text-align left
        display flex
        flex-direction column
        justify-content center
        p
          height 20px
          span
            margin 0 5px
          &.score
            color red
            font-size 14px
            font-weight 700
  .consume
    margin-bottom 15px
    .item
      margin 10px
      padding 10px
      background white
      border-radius 10px
      min-height 100px
      display flex
      flex-direction column
      align-items start
      justify-content center
      p
        height 20px
        line-height 20px
        span
          margin 0 5px
</style>
